<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <!-- Meta Tags -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <meta name="description" content="Oellfare - Charity Template">
        <meta name="author" content="">
        <link rel="stylesheet" href="front/css/swiper-bundle.css">
        <link rel="stylesheet" href="front/css/demo1.css">
        <!-- 引入样式 -->
        <!-- Element UI 组件库 -->
        <link rel="stylesheet" href="front/css/index.css">
        <!-- 引入组件库 -->
<!--        <script src="front/js/elementUI_lib.js"></script>-->
        <script src="front/js/swiper-bundle.min.js"></script>
        <!-- Page Title -->
        <title>链上善行公益平台-首页</title>

        <!-- Favicon and Touch Icons -->
        <link href="front/images/logo1.png" rel="shortcut icon" type="image/jpg">

        <!-- Lead Style -->
        <!-- 实现效果轮播 -->
        <link href="front/css/style.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="front/css/fonts/style.css" />
        <script src="front/js/jquery-3.6.0.min.js"></script>
<!--        <link rel="preload" as="font" crossorigin href="front/css/fonts/fa-solid-900.ttf" type="font/ttf" />-->
<!--        <link rel="preload" as="font" crossorigin href="front/css/fonts/fa-solid-900.woff" type="font/woff" />-->
<!--        <link rel="preload" as="font" crossorigin href="front/css/fonts/fa-solid-900.woff2" type="font/woff2" />-->
        <link rel="stylesheet" type="text/css" href="front/css/all.min.css">
        <link rel="stylesheet" href="front/css/css.css">
        <style>
            .itema{
                margin-top: 10px;
                font-weight: bold;

            }
            .notification-btn {
                border: none;
                background-color: transparent;
            }

            .notification {
                position: fixed;
                top: 20px;
                right: 20px;
                z-index: 999;
                padding: 10px 20px;
                border-radius: 5px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
                opacity: 0;
                transform: translateY(-10px);
                transition: all 0.3s ease-in-out;
            }

            .notification.show {
                opacity: 1;
                transform: translateY(0);;
            }

            .notification.success {
                background-color: #e1f3d8;
                color: #4caf50;
            }

            .notification.warning {
                background-color: #fffbe6;
                color: #ffca28;
            }

            .notification.info {
                background-color: #e6f7ff;
                color: #2196f3;
            }

            .notification.error {
                background-color: #ffebee;
                color: #f44336;
            }
        </style>
    </head>
    <!--PreLoader-->
    <div class="preloader">
        <div class="preloader-inner">
            <div class="siteloading-preloader"></div>
        </div>
    </div>
    <!--PreLoader Ends-->
    <body>
        <div th:replace="commons/front-bar::#header(currUri='index',links=${links})"></div>
        <div class="container_1">
            <div class="app">
                <div class="cardList">
                    <button class="cardList__btn btn btn--left">
                        <div class="icon">
                            <svg  style="background-color: #000000; width: 20px; height: 50px">
                                <use xlink:href="#arrow-left"></use>
                            </svg>
                        </div>
                    </button>

                    <div class="cards__wrapper">
                        <div class="card current--card" th:onclick="click_1()">
                            <div class="card__image">
                                <img src="https://hnfnu.oss-cn-hangzhou.aliyuncs.com/o/bf218b4b97044d7484f2a93c0de53903.jpg"  alt=""/>
                            </div>
                        </div>

                        <div class="card next--card" th:onclick="click_2()">
                            <div class="card__image">
                                <img src="https://hnfnu.oss-cn-hangzhou.aliyuncs.com/o/62ea7ed938924fbdb0d0143fdf85390f.jpg"  alt="" />
                            </div>
                        </div>

                        <div class="card previous--card" th:onclick="click_3()">
                            <div class="card__image">
                                <img src="https://hnfnu.oss-cn-hangzhou.aliyuncs.com/o/77ea3f349c7b4d3ba79453fc1a1f0011.jpg" alt="" />
                            </div>
                        </div>
                    </div>

                    <button class="cardList__btn btn btn--right">
                        <div class="icon">
                            <svg style="background-color: #000000; width: 20px; height: 50px">
                                <use xlink:href="#arrow-right"></use>
                            </svg>
                        </div>
                    </button>
                </div>

                <div class="infoList">
                    <div class="info__wrapper">
                        <div class="info current--info">
                            <h1 class="text name">社会福利</h1>
                            <h4 class="text location">善行不辍，爱心永续</h4>
                            <p class="text description">福祉传递，人间有爱</p>
                        </div>

                        <div class="info next--info">
                            <h1 class="text name">教育发展</h1>
                            <h4 class="text location">教育火炬，心手相传</h4>
                            <p class="text description">捐资助学，爱启未来</p>
                        </div>

                        <div class="info previous--info">
                            <h1 class="text name">环境保护</h1>
                            <h4 class="text location">环保传承，携手同行</h4>
                            <p class="text description">绿动未来，爱无边界</p>
                        </div>
                    </div>
                </div>


                <div class="app__bg">
                    <div class="app__bg__image current--image">
                        <img src="front/images/区块链1.jpg" alt="" />
                    </div>
                    <div class="app__bg__image next--image">
                        <img src="front/images/区块链2.jpg" alt="" />
                    </div>
                    <div class="app__bg__image previous--image">
                        <img src="front/images/区块链3.jpg" alt="" />
                    </div>
                </div>
            </div>

            <div class="loading__wrapper">
                <div class="loader--text">Loading...</div>
                <div class="loader">
                    <span></span>
                </div>
            </div>


            <svg class="icons" style="display: none;">
                <symbol id="arrow-left" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
                    <polyline points='328 112 184 256 328 400'
                              style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                </symbol>
                <symbol id="arrow-right" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
                    <polyline points='184 112 328 256 184 400'
                              style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                </symbol>
            </svg>
        </div>
        <div class="main-wrapper" style="background:linear-gradient(45grad, #ffffff 5%,#e6f4ff 200%);">
                    <div class="row" style="position: relative;width: 100%">
                        <div class="wrapper" style="margin-top: 0px;width: 100%;margin-bottom: 0px;margin-left: 75px;margin-bottom: 45px">
                            <div class="box" style="margin-top: 85px">
                                <div class="front-face">
                                    <div class="icon"><i class="fas fa-book" style="background-color: #509AF8;"></i></div>
                                    <span>温馨图书角</span>
                                </div>
                                <div class="back-face">
                                    <p>·社区居民捐赠图书，扩充小型图书角的藏书</br>
                                        ·举办阅读活动，吸引孩子们参与，促进阅读</br>
                                        ·通过图书角，让知识之光照亮每个人的心灵</p>
                                </div>
                            </div>
                            <div class="box" style="margin-top: 85px">
                                <div class="front-face">
                                    <div class="icon"><i class="fas fa-heart" style="background-color: #509AF8;"></i></div>
                                    <span>爱心助学行动</span>
                                </div>
                                <div class="back-face">
                                    <p>·为贫困学生提供学费援助，助力他们完成学业</br>
                                        ·组织志愿者进行学习辅导，提升学生学习能力</br>
                                        ·爱心助学行动，点亮每个孩子的未来之路</p>
                                </div>
                            </div>
                            <div class="box" style="margin-top: 85px">
                                <div class="front-face">
                                    <div class="icon"><i class="fas fa-home" style="background-color: #509AF8;"></i></div>
                                    <span>温暖老年社区</span>
                                </div>
                                <div class="back-face" >
                                    <p>·志愿者定期到老年社区，陪伴老人们聊天</br>
                                        ·组织文艺表演活动，为老人们带去欢乐</br>
                                        ·用温暖的关怀，温暖每一位老年人的心</p>
                                </div>
                            </div>
                            <div class="box" style="margin-top: 85px">
                                <div class="front-face">
                                    <div class="icon"><i class="fas fa-hand-holding-heart" style="background-color: #509AF8;"></i></div>
                                    <span>助残爱心行动</span>
                                </div>
                                <div class="back-face">
                                    <p>·捐赠助残设施，改善残障人士生活条件</br>
                                        ·提供心理咨询和支持服务，帮助他们积极面对生活</br>
                                        ·助残爱心行动，让残障人士更好地融入社会</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

        <footer id="footer" class="footer wow fadeInUp">
            <div class="footer-above">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-sm-6">
                            <div class="footer_widget">
                                <div class="widget-title">
                                    <h4>友情链接</h4>
                                </div>
                                <div class="footer_nav">
                                    <ul>
                                        <li th:if="${link.type == 2}" th:each="link:${links}" class="menu-item">
                                            <a th:href="@{${link.targetUrl}}" th:text="${link.name}"></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="footer_widget">
                                <div class="widget-title">
                                    <h4>便捷通道</h4>
                                </div>
                                <div class="footer_nav">
                                    <ul>
                                        <li class="menu-item"><a href="articles"><i class="ion-md-arrow-forward"></i> 求助广场</a></li>
                                        <li class="menu-item"><a href="projects"><i class="ion-md-arrow-forward"></i> 公益项目</a></li>
                                        <li class="menu-item"><a href="activities"><i class="ion-md-arrow-forward"></i> 平台活动</a></li>
                                        <li class="menu-item"><a href="board"><i class="ion-md-arrow-forward"></i> 留言板</a></li>
                                        <li class="menu-item"><a href="login-page"><i class="ion-md-arrow-forward"></i> 登陆</a></li>
                                        <li class="menu-item"><a href="register-page"><i class="ion-md-arrow-forward"></i> 注册</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="footer_widget">
                                <div class="widget-title">
                                    <h4>联系我们</h4>
                                </div>
                                <div class="address_content">
                                    <ul>
                                        <li><img src="front/images/phone2.png" alt="icon"><span>电话</span> 15342661007</li>
                                        <li><img src="front/images/mail.png" alt="icon"><span>邮箱</span> 3070735368@qq.com</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="footer_widget">
                                <div class="widget-title">
                                    <h4>我要反馈</h4>
                                </div>
                                <div class="address_content" style="color: #000000">
                                    这里是链上善行平台，在这里你可以寻求帮助，也可以帮助他人。如果你有任何意见，欢迎点击
                                    <a href="feedback" style="color: #CC3333">此链接</a> 进行反馈！
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

         <!-- All JavaScript Files
        ================================================== -->

        <script src="common/js/jquery.min.js"></script>
        <script src="front/js/bootstrap.min.js"></script>
        <script src="front/js/menu.js"></script>
        <script src="front/js/select2.js"></script>
        <script src="front/js/jquery.fancybox.min.js"></script>
        <script src="front/js/owl.carousel.min.js"></script>
        <script src="front/js/spectragram.min.js"></script>
        <script src="front/js/wow.js"></script>
        <script src="front/js/custom.js"></script>
        <script type="text/javascript" src="front/js/imagesloaded.pkgd.min.js"></script>
        <script type="text/javascript" src="front/js/gsap.min.js"></script>
        <script type="text/javascript" src="front/js/script.js"></script>
        <script>
            function click_1(){
                //设置跳转后会聚焦的状态
                localStorage.setItem("kind","walfare");
                window.location.href = "/blockchain-kindness/projects";
            }
            function click_2(){
                //设置跳转后会聚焦的状态
                localStorage.setItem("kind","develop");
                window.location.href = "/blockchain-kindness/projects";
            }
            function click_3(){
                //设置跳转后会聚焦的状态
                localStorage.setItem("kind","protect");
                window.location.href = "/blockchain-kindness/projects";
            }
            //来进行监视数据
            localStorage.setItem('url',window.location.href);
            const backgroundImages = [
                "front/images/slider/slider_bg1.png",
                "front/images/slider/slider_bg2.png", // 添加其他背景图片路径
                "front/images/slider/slider_bg3.png",
                "front/images/slider/slider_bg4.png"
            ];
            var surveyRatingSelect = document.getElementById('surveyRating');
            surveyRatingSelect.addEventListener('change', function() {
                });
            function ToSatisFac(){
                $.ajax({
                    url: "/blockchain-kindness/donations/addSatisfaction",
                    type: "post",
                    data: {
                        grade : surveyRatingSelect.value
                    },
                    success: function (data) {
                        if(data.message === '投票成功') {
                            var element = document.querySelector('#opt_success');
                            element.click();
                            function hideModalAndShowAnother() {
                                $('#surveyModal').modal('hide'); // 关闭模态对话框
                            }
                            setTimeout(hideModalAndShowAnother, 3000);
                        }else{
                            alert("您没有输入合适的信息")
                        }
                    },
                    error: function (data) {
                    }
                });
            }
        </script>
        <script>
            function createNotification(type, title, message) {
                const notificationDiv = document.createElement('div');
                notificationDiv.classList.add('notification', type, 'show');

                const titleElement = document.createElement('strong');
                titleElement.textContent = title;
                notificationDiv.appendChild(titleElement);

                const messageElement = document.createElement('p');
                messageElement.textContent = message;
                notificationDiv.appendChild(messageElement);
                const Container = document.getElementById('notifications1');
                Container.appendChild(notificationDiv);

                setTimeout(() => {
                    notificationDiv.classList.remove('show');
                    setTimeout(() => {
                        Container.removeChild(notificationDiv);
                    }, 300);
                }, 2000);
            }

            function openSuccess() {
                createNotification('success', '感谢您的反馈，我们会做的更好');
            }

            function openWarning() {
                createNotification('warning', '警告', '这是一条警告的提示消息');
            }

            function openInfo() {
                createNotification('info', '消息', '这是一条消息的提示消息');
            }

            function openError() {
                createNotification('error', '错误', '您输入的信息有错，请重新输入');
            }
        </script>
    </body>
</html>